<template>
	<view class="wrapper" :style="{padding:`calc(40rpx + ${safeTop}px) 0 0`}">
		<div class="posf">
			<div class="header flex-start" :style="{padding:`calc(15rpx + ${safeTop}px) 25rpx 20rpx`}">
				<u-icon name="arrow-left" color="#ffffff" size="26" @click="back(1)"></u-icon>
				<div class="cfff f34 ml20">我的优惠券</div>
			</div>
		</div>
		<view class="discount-main">
			<div class="mt20 discount center" v-for="v in movieCoupo" :key="v.id">
				<div class="price-box ">
					<div class=" mb10 align-end" :class="v.status=='未使用'?'ctheme':'c999'">
						<div class="f20">￥</div>
						<div class="f40 fbold">{{v.balance}}</div> 
						<div class="c999 f24 " :class="v.balance<v.total?'scx':'yc'" >￥{{v.total}}</div>
					</div>
					
				</div>
				<div class="flex1" :class="v.status=='未使用'?'':'c999'">
					<div class="f28 mb20">{{v.mc}}</div>
					<div class="f24 mb20">有效期至{{v.endTime}}</div>
					<div class="f20">可升级转换成成积分</div>
				</div>
				<!-- <div class="bth-red" @click="openPage('../shouye/shouye',1)" v-if="v.status=='未使用'">去下单</div> -->
				<div class="bth-red" @click="redeem(v)" v-if="v.status=='未使用'">升级电影票</div>
				<div class="c999 mr30" v-else>{{v.status}}</div>
			</div>
			<u-empty v-if="movieCoupo.length==0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				movieCoupo: []
			}
		},
		onLoad() {
			this.getMovieCoupon()
		},
		methods: {
			// 10、查询用户所拥有的电影优惠券
			padRight(str, length) {
				// `\u00A0`相当于一个空格占位符,直接用`' '`的话展示效果不生效，注意`\u00A0`前有一个空格,加上空格后才生效的
				return str + ' \u00A0'.repeat(length - str.length)
			}, 
			getMovieCoupon() {
				this.$http('/api/getHyxxCoupons', {
					phone: wx.getStorageSync('uInfo').phone
				}).then((r) => {
					this.movieCoupo = r.data
				})
			},
			redeem(v) {
				let that = this
				 // uni.showModal({
				 //     title: '提示',
				 //    content: "1.实名认证\r\n2.自动检测更新\r\n3.细节优化",
				 //     showCancel: false
				 // });
			 
				 uni.showModal({
				 		title: '升级须知',
				 		// 提示文字
				 		content: '1、电影票升级之后会自动换算成积分充值到您在我平台的账户中；\r\n2、升级之后就不能再以卡券的形式兑换电影票；\r\n3、升级之后积分不可再兑换成电影卡券，请您谨慎操作',
				 		// 取消按钮的文字自定义
				 		cancelText: "再想想",
				 		// 确认按钮的文字自定义
				 		confirmText: "确定升级",
				 		//删除字体的颜色
				 		confirmColor:'#000000',
				 		//取消字体的颜色
				 		cancelColor:'#c2c2c2',
				 		success: function(res) {
				 		if (res.confirm) {
				 			// 执行确认后的操作
							that.$http('/api/redeem?phone='+wx.getStorageSync('uInfo').phone+'&couponId='+v.id, {
								 
							}, false, 'POST').then((r) => {
								that.sToast('升级成功');
								that.getMovieCoupon()
							 
							})
				 		} 
				 		else {
				 			// 执行取消后的操作
				 		}
				 	}
				 }) 
				 
				 
			 // this.$http('/api/redeem?phone='+wx.getStorageSync('uInfo').phone+'&couponId='+v.id, {
			 	 
			 // }, false, 'POST').then((r) => {
			 // 	this.sToast('升级成功');
			 // 	that.getMovieCoupon()
			  
			 // })
			},
		}
	}
</script>

<style lang="scss" scoped>
	.discount-main {
		padding: 40rpx 20rpx 0;
		.scx {
			text-decoration:line-through;
		}	
		.yc {
			display: none;
		}
		.status {
			left: 0;
			top: 0;
		}

		.bth-red {
			width: 140rpx;
		}

		.price-box {
			width: 130rpx;
			margin-right: 90rpx;
		}

		.discount-scroll {
			max-height: 50vh;
			overflow-y: scroll;
			padding-bottom: 50rpx;
		}

		.discount {
			height: 170rpx;
			background: url(../../static/discount.png) no-repeat center;
			background-size: 100% 100%;
			padding: 0 20rpx 0 40rpx;
			border-radius: 20rpx;
		}
	}

	.nav-bar {
		width: 100%;
		background: linear-gradient(to bottom, #FEDAEB, #FDFAFB);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 25rpx 35rpx 0;
		margin-top: -33rpx;
		box-shadow: 0rpx -4rpx 6rpx 0 #FF5859;

	}

	.posf {
		top: 0;
		left: 0;
		z-index: 5;
		width: 100%;
	}

	.header {
		background: linear-gradient(to left, #F857A5, #FF5858);
		padding-left: 30rpx;
		padding-bottom: 55rpx;
	}
	uni-modal .uni-modal__bd{      
	    white-space: pre-wrap;      
	}
</style>